<template>
  <div class="statistics">
    <header-nav :leftArrow="true" titelText="案件统计"></header-nav>
    <div class="statistics-content">
      <div class="caseType">
        <div class="caseType-title">案件类型占比</div>
        <div id="pieCharts"></div>
        <div style="height: 24px"></div>
      </div>

      <div class="caseType">
        <div class="caseType-title">案件罚款金额统计表</div>
        <table class="table">
          <tr class="table-header">
            <td style="min-width: 50px">序号</td>
            <td>承办单位</td>
            <td style="min-width: 100px">罚款金额(元)</td>
          </tr>
          <tr class="table-content" v-for="(item, index) in tableData" :key="index">
            <td :style="index % 2 === 1 ? 'background: rgba(23, 100, 206, 0.04);' : ''
      ">
              {{ index + 1 }}
            </td>
            <td :style="index % 2 === 1 ? 'background: rgba(23, 100, 206, 0.04);' : ''
      ">
              {{ item.deptName }}
            </td>
            <td :style="index % 2 === 1 ? 'background: rgba(23, 100, 206, 0.04);' : ''
      ">
              {{ item.money }}
            </td>
          </tr>
        </table>
        <div v-if="tableData.length == 0" class="noData">暂无数据</div>
        <div v-if="tableData.length == 0" style="height: 24px"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { showFailToast } from 'vant'
const { useStatistics } = $globalStore

//饼图数据
const pieData = ref([
  { value: 0, name: '立案数量' },
  { value: 0, name: '调查取证数量' },
  { value: 0, name: '案件处理数量' },
  { value: 0, name: '结案归档数量' },
  { value: 0, name: '已结束案件数量' },
])

//获取案件类型占比数据
const getPieData = async () => {
  const res = await useStatistics.getCaseType()
  if (res.code == 0) {
    pieData.value[0].value = res.data['1']
    pieData.value[1].value = res.data['2']
    pieData.value[2].value = res.data['3']
    pieData.value[3].value = res.data['4']
    pieData.value[4].value = res.data['6']
    setTimeout(() => {
      getPieCharts()
    }, 500)
  } else {
    showFailToast(res.message)
  }
}

//饼图初始化
const getPieCharts = () => {
  const myChart = echarts.init(document.getElementById('pieCharts'))
  let option = {
    color: ['#477BFF', '#47D1CB', '#FF477B', '#59DBFF', '#CB47FF'],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      x: 'center',
      y: 'bottom',
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#666666',
        fontSize: 14,
        fontWeight: 400,
        rich: {
          a: {
            verticalAlign: 'middle',
          },
        },
        padding: [0, 0, -2, 0],
      },
      itemGap: 20,
    },
    series: [
      {
        name: '数量',
        type: 'pie',
        radius: '50%',
        center: ['50%', '35%'],
        data: pieData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  myChart.setOption(option)
}

//获取罚款金额统计表数据
const tableData = ref([
  // {
  //   deptName: '岳麓区消防大队', //机构名称
  //   money: 123.36, //罚款金额
  // },
  // {
  //   deptName: '岳麓区消防大队长丰支队', //机构名称
  //   money: 200000, //罚款金额
  // },
])
const getTableData = async () => {
  const res = await useStatistics.getDeptMoney()
  if (res.code == 0) {
    tableData.value = res.data
    console.log(tableData.value)
  }
}

onMounted(() => {
  getPieData()
  getTableData()
})
</script>
<style lang="scss" scoped>
.statistics {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .statistics-content {
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    margin-top: 46px;

    .caseType {
      background-color: #ffffff;
      border-radius: 8px;
      margin: 10px 8px;

      .caseType-title {
        padding: 16px 12px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
        border-bottom: 1px solid #f0f0f0;
      }

      #pieCharts {
        width: 100%;
        height: 300px;
      }

      .table {
        width: 100%;
        padding: 24px 12px;

        .table-header {
          td {
            color: #666666;
            background-color: #f5f5f5;
            padding: 12px 8px;
          }
        }

        .table-content {
          td {
            padding: 12px 8px;
            color: #4d4d4d;
          }
        }
      }
    }
  }
}

.noData {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #666666;
}
</style>
